<template>
  <!-- 导入文件 页面 -->
  <div class="export-file">
    <el-alert
      class="my_alert"
      title="提交成功！"
      type="success"
      description="导入结果请到“文件列表”查看"
      show-icon
      v-if="alertMessageSuccessShow"
    ></el-alert>
    <el-form
      label-position="left"
      label-width="85px"
      :model="formData"
      :rules="rules"
      size="mini"
      ref="formref"
      :show-message="false"
    >
      <el-form-item label="数据来源:" prop="data_source" style="height: 40px" class="z-form_label">
        <el-select v-model="formData.data_source" placeholder="请选择数据来源" style="width: 230px">
          <el-option v-for="e in dataOrigins" :key="e.id" :label="e.name" :value="e.id"></el-option>
        </el-select>
        <div class="text-tips-blue" @click="openDialog('dataOriginDialogShow')">设置数据来源</div>
      </el-form-item>
      <el-form-item
        label="对象类型:"
        prop="data_type"
        style="height: 40px; margin-top: 24px"
        class="z-form_label"
      >
        <el-select v-model="formData.data_type" placeholder="请选择对象类型" style="width: 230px">
          <el-option v-for="e in addressObjects" :key="e.id" :label="e.name" :value="e.id"></el-option>
        </el-select>
        <div class="text-tips-blue" @click="openDialog('addrTypeDialogShow')">设置对象类型</div>
      </el-form-item>

      <el-form-item label="上传文件:" style="margin-top: 24px" prop="file_data">
        <el-upload
          :http-request="() => {}"
          :on-change="upload_change"
          :before-upload="upload_before"
          :action="apis.importFileRecordSave"
          :show-file-list="false"
        >
          <el-button type="primary">上传文件</el-button>
          <el-button style="margin-left: 10px" @click.stop="downLoadTemp">下载模板</el-button>
          <div
            style="text-align: left;color: #444;cursor: default;"
            @click.stop="() => {}"
            v-if="formData.file_full_name"
          >{{ formData.file_full_name }}</div>
          <div class="el-upload__tip" slot="tip">
            <div class="up-title">标注：</div>
            <div class="tip-item">1. 仅支持excel、csv格式，文件不超过10M</div>
            <div class="tip-item">2. 文件上传时，请不要改变模板标题；</div>
            <div class="tip-item">3. “对象编号、对象名称、地址、城市”必填，“详情选填”；</div>
            <div class="tip-item">4. 详情列可以增加多个字段内容，不同字段用分号隔开，</div>
            <div class="tip-item">&nbsp;&nbsp;&nbsp;&nbsp;例：面积：100平米；租金：100万元；此地还处于打桩阶段；</div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item style="margin-top: 60px">
        <el-button
          size="medium"
          type="primary"
          style="width: 90px"
          @click="submitClick('formref')"
        >提交</el-button>
        <!-- <el-button size="medium" style="width: 90px">取消</el-button> -->
      </el-form-item>
    </el-form>

    <!-- 设置数据来源 对话框 dataOriginDialogShow -->
    <setAddrTypeWin
      :visible="dataOriginDialogShow"
      :onOk="e => closeDialog('dataOriginDialogShow', e)"
      title="设置数据来源"
      :initDataList="dataOrigins"
      :getList="getList"
      apiString="dataSource"
      :total_num_pass="total_num"
    ></setAddrTypeWin>

    <!-- 设置对象类型 addrTypeDialogShow -->
    <setAddrTypeWin
      :visible="addrTypeDialogShow"
      :onOk="e => closeDialog('addrTypeDialogShow', e)"
      title="设置对象类型"
      :initDataList="addressObjects"
      :getList="getList"
      apiString="dataType"
      :total_num_pass="total_num"
    ></setAddrTypeWin>
  </div>
</template>
<script>
import axios from "axios";
import { fileByBase64, downLoadTempFunc, addOperationLog } from "@/utils/index";

import setAddrTypeWin from "@/components/fileImport/setAddrTypeWin.vue";

export default {
  data() {
    return {
      formData: {
        data_source: "",
        data_type: "",
        file_name: "",
        file_full_name: "",
        file_data: "",
      },
      total_num: 0,
      addrTypeDialogShow: false,
      dataOriginDialogShow: false,
      dataOrigins: [],
      addressObjects: [],
      alertMessageSuccessShow: false,
      rules: {
        data_source: [
          { required: true, message: "请选择数据来源", trigger: "blur" },
        ],
        data_type: [
          { required: true, message: "请选择对象类型", trigger: "blur" },
        ],
        file_data: [{ required: true, message: "请上传文件", trigger: "blur" }],
      },
    };
  },
  methods: {
    async upload_change(file) {
      console.log(file, "file");
      this.file = file.raw;
    },
    async upload_before(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx" && extension !== "xls" && extension !== "csv") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
        return;
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
        return;
      }

      this.formData.file_data = await fileByBase64(this.file);
      this.formData.file_full_name = file.name;
      this.formData.file_name = file.name.split(".")[0];
    },
    submitClick(formName) {
      console.log(formName, "formName");
      this.$refs[formName].validate(async (valid, options) => {
        if (valid) {
          try {
            const res = await this.axios.post(
              this.apis.importFileRecordSave,
              this.formData
            );
            if (res.retCode === 2000) {
              addOperationLog({
                title: "上传文件",
                content: {
                  id: new Date().getTime(),
                  obj_number: "文件id",
                  obj_name: "文件名称",
                  old_target_address: new Date().getTime(), //此处字符串
                  new_target_address: this.formData.file_name,
                },
              });
              this.formData = {
                data_source: "",
                data_type: "",
                file_name: "",
                file_full_name: "",
                file_data: "",
              };
              this.alertMessageSuccessShow = true;
              setTimeout(() => {
                this.alertMessageSuccessShow = false;
              }, 3000);
            } else {
              this.$message.warning(res.retMessage);
            }
          } catch (er) {
            this.$message.error(err);
          }
        } else {
          console.log(options, "options");
          this.$message.warning("请选择必填项~");
          return false;
        }
      });
    },
    openDialog(dialogStr) {
      this[dialogStr] = true;
    },
    closeDialog(dialogStr) {
      this[dialogStr] = false;
    },
    confirmSubmit(e, optionStr, dialogStr) {
      console.log(e, optionStr, dialogStr, "e, optionStr, dialogStr");
      this[optionStr] = e;
      this[dialogStr] = false;
    },
    async getList(type, page) {
      console.log(page, 'page');
      let typeMaps = {
        1: async () => {
          const res1 = await this.axios.post(this.apis.dataSourceQuery, {
            page: page || 1,
            limit: 10,
          });
          if (res1.retCode === 2000) {
            this.dataOrigins = res1.rows.items;
            this.total_num = res1.rows.total_num
            console.log(res1.rows.total_num, '1.rows.total_num');
          }
        },
        2: async () => {
          const res2 = await this.axios.post(this.apis.dataTypeQuery, {
            page: page || 1,
            limit: 10,
          });
          if (res2.retCode === 2000) {
            this.addressObjects = res2.rows.items;
            this.total_num = res2.rows.total_num
          }
        },
      };
      if (type) {
        typeMaps[type]();
      } else {
        typeMaps[1]();
        typeMaps[2]();
      }
    },
    async downLoadTemp() {
      const res = await this.axios({
        method: "GET",
        url: this.apis.importFileRecordTemplate,
        responseType: "blob",
      });
      console.log(res, "res");
      downLoadTempFunc(res);
    },
  },
  mounted() {
    // 一进页面跳出按钮
    // this.submitClick('formref')
    this.getList();
  },
  components: {
    setAddrTypeWin,
  },
};
</script>
<style>
.export-file {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.export-file .z-form_label .el-form-item__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.text-tips-blue {
  display: inline;
  color: #409eff;
  font-size: 12px;
  cursor: pointer;
}

.data_origin_list {
  /* padding: 25px;
  box-sizing: border-box; */
  width: 100%;
}
.origin_item {
  display: flex;
  justify-content: space-between;
  padding: 10px 8px;
  box-sizing: border-box;
  border-bottom: #ececec 1px solid;
}
.oi_left {
  font-size: 12px;
  color: #444444;
}
.oil_text {
  color: #444444;
  border: 1px solid transparent;
}
.oil_inp {
  border: 1px solid #409eff;
  outline: none;
}
.oi_right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.oir_btn {
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
}

.export-file .el-dialog__title {
  font-size: 14px;
  font-weight: 600;
}
.export-file .el-dialog__header {
  border-bottom: #ececec 1px solid;
}

.dataOriginDialog .el-dialog__body {
  padding: 20px;
}
.btn-groups {
  width: 100%;
  text-align: center;
  margin-top: 50px;
}

.export-file .el-dialog {
  min-width: 300px;
}

.export-file .my_alert {
  position: fixed;
  top: 40px;
  z-index: 1000;
  width: 300px;
}
</style>
